<template>
    <div class="selector-group">
        <!-- 级联选择器 -->
        <div class="cascader-wrapper">
            <el-cascader v-model="cascaderValue" :options="cascaderOptions" :props="{ expandTrigger: 'hover' }"
                placeholder="请选择区域" size="small" style="width: 180px;" @change="handleCascaderChange" />
        </div>

        <!-- 下拉选择器 -->
        <div class="dropdown-wrapper">
            <el-select v-model="dropdownValue" placeholder="请选择类型" size="small" style="width: 120px;"
                @change="handleDropdownChange">
                <el-option v-for="item in dropdownOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
    </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import { ElCascader, ElSelect, ElOption } from 'element-plus'

// 定义事件
const emit = defineEmits(['cascaderChange', 'dropdownChange'])

// 响应式数据
const cascaderValue = ref([])
const dropdownValue = ref('')

// 级联选择器的选项数据
const cascaderOptions = ref([
    {
        value: 'hainan',
        label: '海南省',
        children: [
            {
                value: 'lingshui',
                label: '陵水县',
                children: [
                    { value: 'center', label: '县中心区' },
                    { value: 'north', label: '北部片区' },
                    { value: 'south', label: '南部片区' },
                    { value: 'coastal', label: '沿海片区' }
                ]
            },
            {
                value: 'sanya',
                label: '三亚市',
                children: [
                    { value: 'yazhou', label: '崖州区' },
                    { value: 'tianya', label: '天涯区' },
                    { value: 'jiyang', label: '吉阳区' }
                ]
            }
        ]
    }
])

// 下拉选择器的选项数据
const dropdownOptions = ref([
    { value: 'population', label: '人口分布' },
    { value: 'economy', label: '经济发展' },
    { value: 'environment', label: '环境质量' },
    { value: 'infrastructure', label: '基础设施' },
    { value: 'tourism', label: '旅游资源' },
    { value: 'agriculture', label: '农业发展' }
])

// 处理级联选择器变化
const handleCascaderChange = (value) => {
    emit('cascaderChange', value)
    console.log('级联选择器值变化:', value)
}

// 处理下拉选择器变化
const handleDropdownChange = (value) => {
    emit('dropdownChange', value)
    console.log('下拉选择器值变化:', value)
}
</script>

<style scoped>
.selector-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.78vw;
    padding: 0.93vh;
}

.cascader-wrapper,
.dropdown-wrapper {
    display: flex;
    align-items: center;
}

/* 自定义ElementPlus组件样式 */
:deep(.el-cascader) {
    background: #131F2B;
    border: 1px solid #5086C1;
    border-radius: 0.21vw;
}

:deep(.el-input__wrapper) {
    background: #131F2B;
}

:deep(.el-cascader .el-input__inner) {
    background: #131F2B;
    color: #ffffff;
    border: none;
    font-size: 0.625vw;
    font-weight: 500;
}

:deep(.el-cascader .el-input__inner::placeholder) {
    color: rgba(255, 255, 255, 0.7);
}

:deep(.el-cascader .el-input__suffix) {
    color: #00BFFF;
}

:deep(.el-select) {
    background: #131F2B;
    border-radius: 0.21vw;
}

:deep(.el-select--small .el-select__wrapper) {
    background-color: #131F2B;
    border: 1px solid #5086C1;
}

:deep(.el-select__placeholder) {
    color: white;
}

:deep(.el-select .el-input__inner) {
    background: #131F2B;
    color: #ffffff;
    border: 1px solid #5086C1;
    font-size: 0.625vw;
    font-weight: 500;
}

:deep(.el-select .el-input__inner::placeholder) {
    color: rgba(255, 255, 255, 0.7);
}

:deep(.el-select .el-input__suffix) {
    color: #00BFFF;
}

/* 下拉面板样式 */
:deep(.el-cascader-panel) {
    background: #131F2B;
    border: 1px solid #00BFFF;
}

:deep(.el-cascader-menu .el-cascader-node) {
    color: #ffffff;
    background: transparent;
}

:deep(.el-cascader-menu .el-cascader-node:hover) {
    background: rgba(0, 191, 255, 0.2);
}

:deep(.el-cascader-menu .el-cascader-node.is-active) {
    background: rgba(0, 191, 255, 0.3);
    color: #ffffff;
}

:deep(.el-select-dropdown) {
    background: #131F2B;
    border: 1px solid #00BFFF;
}

:deep(.el-select-dropdown .el-select-dropdown__item) {
    color: #ffffff;
    background: transparent;
}

:deep(.el-select-dropdown .el-select-dropdown__item:hover) {
    background: rgba(0, 191, 255, 0.2);
}

:deep(.el-select-dropdown .el-select-dropdown__item.selected) {
    background: rgba(0, 191, 255, 0.3);
    color: #ffffff;
}
</style>